/* @author yanjun
 * @date 2018.09
 */
import { Component } from 'react';
import './zoomable.less';
import IconFont from '@/components/IconFont';
import Handle from './handle';
import { Menu, Dropdown } from 'antd';

const timestamp = Date.now();
const defaultProps = {
  used: true,
  direction: [
    'top',
    'right-top',
    'right',
    'right-bottom',
    'bottom',
    'left-bottom',
    'left',
    'left-top',
  ],
  borderWidth: 2,
};

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isdrawing: 0,
      direction: '',
      width: 0,
      height: 0,
      position: {
        x: props.positionX,
        y: props.positionX,
      },
      coordinate: {
        x: 0,
        y: 0,
      },
      change: {
        x: 0,
        y: 0,
      },
      reverseX: false,
      reverseY: false,
    };
  }
  componentDidMount() {
    const {
      zoomable: { width = {}, height = {} } = {},
      defaultWidth = 0,
      defaultHeight = 0,
    } = this.props;
    document.documentElement.onmousemove = event => {
      const { isdrawing, direction } = this.state;
      if (isdrawing) {
        direction.split('-').forEach(item => Handle[`${item}Move`](this, event));
      }
    };
    document.documentElement.onmouseup = () => {
      const { isdrawing } = this.state;
      if (isdrawing) {
        Handle.mouseupHandle(this);
      }
    };
    const childNode = document.querySelector(`.size${timestamp}`).childNodes[0];
    this.setState({
      width: defaultWidth || this.defaultSize(childNode.offsetWidth, width.min, width.max),
      height: defaultHeight || this.defaultSize(childNode.offsetHeight, height.min, height.max),
    });
  }
  defaultSize(defaultSize, min, max) {
    if (min && min > defaultSize) {
      return min;
    } else if (max && max < defaultSize) {
      return max;
    } else {
      return defaultSize;
    }
  }
  boxStyle(props) {
    let padding = [
      {
        top: 0,
      },
      {
        right: 0,
      },
      {
        bottom: 0,
      },
      {
        left: 0,
      },
    ];
    const borderWidth = props.used ? `${props.borderWidth}px` : 0;
    props.direction.forEach(item => {
      padding = padding.map(direction => {
        if (typeof direction === 'object') {
          const key = Object.keys(direction)[0];
          if (item.indexOf(key) > -1) {
            return borderWidth;
          }
        }
        return direction;
      });
    });
    return {
      padding: padding
        .map(item => {
          if (typeof item === 'object') {
            return item[0];
          }
          return item;
        })
        .join(' '),
    };
  }
  render() {
    const me = this;
    const {
      children,
      onClose,
      zoomable,
      onClear,
      onStart,
      onStop,
      fixedWidth,
      fixedHeight,
    } = me.props;
    const props = Object.assign({}, defaultProps, zoomable);
    return (
      <div className="zoomable-box" style={me.boxStyle(props)}>
        <div
          className="zoomable-content"
          style={{
            width: fixedWidth || Handle.calculation(me, 'width'),
            height: fixedHeight || Handle.calculation(me, 'height'),
          }}
        >
          <div className={'zoomable-content-title'}>
            <span>实时报文</span>
            <IconFont
              type="iconguanbi"
              className={'close'}
              onClick={() => {
                onClose && onClose();
              }}
            />
          </div>
          <Dropdown
            overlayClassName={'zoomable-dropdown-wrap'}
            overlay={ContentMenu({ onClear, onStart, onStop })}
            trigger={['contextMenu']}
          >
            <div
              onMouseDown={e => {
                e.stopPropagation();
              }}
              onContextMenu={e => {
                e.preventDefault();
              }}
              className={`stretchable-size size${timestamp}`}
            >
              {children}
            </div>
          </Dropdown>
        </div>
        {props.used &&
          props.direction.map(item => {
            let border = props.borderWidth;
            item.indexOf('-') > -1 && ++border;
            return (
              <div
                key={item}
                className={`zoom-bar ${item}-bar`}
                style={{
                  width: `${border}px`,
                  height: `${border}px`,
                }}
                onMouseDown={e => {
                  Handle.mousedownHandle(me, e, item);
                }}
              ></div>
            );
          })}
      </div>
    );
  }
}
const ContentMenu = ({ onClear, onStart, onStop }) => {
  return (
    <Menu
      onClick={e => {
        switch (e.key) {
          case 'clear':
            onClear && onClear();
            break;
          case 'start':
            onStart && onStart();
            break;
          case 'stop':
            onStop && onStop();
            break;
        }
      }}
    >
      <Menu.Item key="start">开始</Menu.Item>
      <Menu.Item key="stop">暂停</Menu.Item>
      <Menu.Item key="clear">清空</Menu.Item>
    </Menu>
  );
};

export default Content;
